<script setup>
import { ref } from 'vue';
import { uniFetch } from '../../api/uni-fetch';
import { onLoad } from '@dcloudio/uni-app'

const formData = ref({
	express_company: '',
	express_no: '',
	phone: '',
	reason: '',
	msg: '',
	id: '',
	app_id: uni.appId
})

onLoad((option) => {
	console.log(option.id, 'option')
	formData.value.id = option.id
})


// 正则手机号码
function checkNumber(num) {
	console.log(num)
	if (/^(?:(?:\+|00)86)?1\d{10}$/.test(num)) {
		return true;
	}
	return false
}

function submit() {
	if (!checkNumber(formData.value.phone)) {
		uni.showToast({
			title: "请检查手机号",
			icon: 'error'
		})
		return
	}
	if (formData.value.reason.trim().length == 0 || formData.value.express_company.trim().length == 0 ||
		formData.value.express_no.trim().length == 0) {
		uni.showToast({
			title: "请填写完整信息",
			icon: 'none'
		})
		return
	}
	console.log((formData), 'toRefs(formData.value)');

	uniFetch.post("/shop-order/refund", {
		express_company: formData.value.express_company,
		express_no: formData.value.express_no,
		phone: formData.value.phone,
		reason: formData.value.reason,
		msg: formData.value.msg,
		id: formData.value.id,
		app_id: uni.appId
	}).then(res => {
		console.log("退款返回", res)
		if (res.code !== 10000) {
			return uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
		if (res.code == 10000) {
			uni.redirectTo({ url: '/pages/orders/orders', })
			return uni.showToast({
				title: '提交成功'
			})
		}
	}, err => {
		console.log(err.data.code)
		uni.showToast({
			title: err.msg,
			icon: 'none'
		})
	})
}
</script>
<template>
	<view>
		<view class="flex_column content">
			<view class="flex_row view_commom">
				<view class="flex_row">
					<image class="img" src="../../static/images/must.png"></image>
					<text class="text_title">物流公司</text>
				</view>
				<input v-model="formData.express_company" style="text-align:right;font-size:28rpx;color:#B3B1B1;width: 70%;"
					placeholder-style="color:#B3B1B1;font-size:28rpx" maxlength="18" placeholder="请输入" />
			</view>

			<view class="flex_row view_commom">
				<view class="flex_row">
					<image class="img" src="../../static/images/must.png"></image>
					<text class="text_title">物流单号</text>
				</view>
				<input v-model="formData.express_no" style="text-align:right;font-size:28rpx;color:#B3B1B1;width: 70%;"
					placeholder-style="color:#B3B1B1;font-size:28rpx" maxlength="38" placeholder="请输入" />
			</view>

			<view class="flex_row view_commom">
				<view class="flex_row">
					<image class="img" src="../../static/images/must.png"></image>
					<text class="text_title">手机号</text>
				</view>
				<input v-model="formData.phone" style="text-align:right;font-size:28rpx;color:#B3B1B1;width: 70%;"
					placeholder-style="color:#B3B1B1;font-size:28rpx" maxlength="38" placeholder="请输入" type="number" />
			</view>

			<view class="flex_row view_commom" style="height: 40rpx;">
				<view class="flex_row">
					<image class="img" src="../../static/images/must.png"></image>
					<text class="text_title">退款原因</text>
				</view>
			</view>
			<view class="nav-textarea">
				<textarea style="height: 160rpx; font-size: 28rpx;width: 100%;" placeholder="请输入退款原因"
					v-model="formData.reason"></textarea>
			</view>

			<view class="flex_row view_commom" style="height: 40rpx;">
				<view class="flex_row">
					<text class="text_title">备注</text>
				</view>

			</view>
			<view class="nav-textarea">
				<textarea style="height: 100rpx; font-size: 28rpx;width: 100%;" placeholder="请输入"
					v-model="formData.msg"></textarea>
			</view>

			<view class="view_submit" @click="submit">提 交</view>


		</view>
	</view>
</template>



<style lang="scss" scoped>
.content {
	width: 100%;

	.view_submit {
		margin-top: 40rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		background: generate-gradient($custom-theme-color, $custom-theme-color-l);
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: white;
		text-align: center;
		border-radius: 40rpx;
	}

	.view_commom {
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;


		.img {
			height: 20rpx;
			width: 20rpx;
		}

		.text_title {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.nav-textarea {
		// width: 100%;
		min-height: 60rpx;
		background-color: #f6f6f6;
		margin: 20rpx;
		border-radius: 14rpx;
		padding: 20rpx;

		// border-bottom: 1px solid #F6F6F6;

		uni-textarea {
			width: inherit;
			height: 100px;
			display: block;
			position: relative;
			font-size: 28rpx;
			line-height: normal;
			white-space: pre-wrap;
			word-break: break-all;
		}
	}
}

.flex_column {

	display: flex;
	flex-direction: column;
}

.flex_row {
	display: flex;
	flex-direction: row;
}
</style>